<template>
  <el-dialog
    title="人员详情"
    :visible="isShow"
    :before-close="close"
  >
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="8">人员名称：{{ userObj.userName }}</el-col>
          <el-col :span="8">角色：{{ userObj.roleName }}</el-col>
          <el-col :span="8">联系电话：{{ userObj.mobile }}</el-col>
          <el-col :span="8">负责区域：{{ userObj.regionName }}</el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table
          :data="workloadList"
          style="width: 100%"
        >
          <el-table-column
            prop="timeSlot"
          />
          <el-table-column
            prop="total"
            label="总工单数"
          />
          <el-table-column
            prop="cancelCount"
            label="拒绝工单"
          />
          <el-table-column
            prop="workCount"
            label="完成工单"
          />
          <el-table-column
            prop="progressTotal"
            label="进行中工单"
          />
        </el-table>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import { getUserInfoAPI, userWorkAPI } from '@/api/user'
// 本周第一天，当月第一天，当月当前时间，当年第一天
import { weeksDetailStart, monthDetailStart, monthDetailEnd, yearDetailStart } from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      userObj: {},
      time: {
        userId: 17,
        end: monthDetailEnd
      },
      workloadList: []
    }
  },
  computed: {},
  watch: {
    userId() {
      this.getUserInfo()
      this.userWeek()
      this.userMonth()
      this.userYear()
    }
  },
  created() {},
  methods: {
    close() {
      this.$emit('update:isShow', false)
      this.workloadList = []
    },
    async getUserInfo() {
      try {
        const res = await getUserInfoAPI(this.userId)
        // console.log(res)
        this.userObj = res.data
        // console.log(this.userObj)
      } catch (error) {
        console.log(error)
      }
    },
    async userWeek() {
      const { data } = await userWorkAPI({ ...this.time, start: weeksDetailStart() })
      console.log(data)
      this.workloadList.push({ timeSlot: '本周', ...data })
      console.log(this.workloadList)
    },
    async userMonth() {
      const { data } = await userWorkAPI({ ...this.time, start: monthDetailStart })
      console.log(data)
      this.workloadList.push({ timeSlot: '本月', ...data })
      console.log(this.workloadList)
    },
    async userYear() {
      const { data } = await userWorkAPI({ ...this.time, start: yearDetailStart })
      console.log(data)
      this.workloadList.push({ timeSlot: '本年', ...data })
      console.log(this.workloadList)
    }
  }
}
</script>

<style scoped>

</style>
